<template>
  <div class="knowledge-base-container">
    <div class="return" @click="emit('return')">
      <i class="icon-fanhui iconfont"/>
    </div>
    <div class="option-bar">
      <div class="tool" v-for="tool in tools" :key="tool.icon">
        <el-tooltip :content="tool.name" placement="right">
          <div @click="click(tool.name)" :class="`iconfont ${tool.icon}`" :style="`${'size' in tool?'font-size:' + tool.size + 'px;':''}`"/>
        </el-tooltip>
      </div>
    </div>
    <div class="operate-container">
      <div class="upload" v-if="showUpload">
        <el-upload
            accept="application/pdf, text/plain, application/vnd.openxmlformats-officedocument.wordprocessingml.document"
            class="upload-demo"
            drag
            :action="globalConfig.baseUrl + 'api/upload'"
            multiple
            :auto-upload="false"
            ref="uploadRef"
            :show-file-list="true"
            :limit="10"
            :on-exceed="exceed"
            :data="{
              knowledge_base: props.knowledgeBase
            }"
        >
          <div class="el-upload__text">
            拖动文件到这里或<em>点击选择文件</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              只能上传pdf、docx和txt类型文件,一次最多上传10个文件！
            </div>
          </template>
        </el-upload>
        <div @click="upload" class="upload-btn">
          点击上传
        </div>
      </div>
      <div class="file-list" v-else>
        <div v-if="!files">
          加载中
        </div>
        <div v-else-if="!files.length">无文件</div>
        <div v-else class="line" v-for="file in files" :key="file.name">
          <div class="name">
            {{ file.name }}
          </div>
          <div class="status">
            {{ file.status }}
          </div>
          <div @click="deleteKnowledgeBaseFile(file.name)" class="delete">删除</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onUnmounted, ref} from 'vue'
import {globalConfig} from '../utils/config.js'
import {get, post} from '../utils/request.js'

const emit = defineEmits(['return'])
const props = defineProps(['knowledgeBase'])
const uploadRef = ref(null)
const showUpload = ref(false)
const upload = ()=>{
  uploadRef.value.submit()
}
const exceed = ()=>{
  ElMessage({
    message: '文件数量超出限制！',
    type: 'error',
  })
}
const tools = ref([
  {
    name: '知识库',
    icon: 'icon-ic_wenjianjia',
    size: 28
  },
  {
    name: '上传文件至知识库',
    icon: 'icon-daochu'
  },
])
const click = (name) => {
  switch (name){
    case '上传文件至知识库':{
      showUpload.value = true
      break
    }
    case '知识库':{
      showUpload.value = false
      break
    }
  }
}
const files = ref(null)
const timer = setInterval(()=>{
  get('api/get_knowledge_base_files', {
    knowledge_base: props.knowledgeBase
  }).then(e=>{
    files.value = e.data.data
  })
},1000)
onUnmounted(()=>{
  clearInterval(timer)
})
const deleteKnowledgeBaseFile = (fileName) => {
  post('api/delete_knowledge_base_file', {
    file_name: fileName,
    knowledge_base: props.knowledgeBase
  }).then(res => {
    if(res.data.message === 'success'){
      files.value = files.value.filter(e => e !== fileName)
      ElMessage({
        message: '删除成功！',
        type: 'success',
      })
    }
  })
}
</script>

<style lang="scss" scoped>
.knowledge-base-container{
  display: flex;
  flex-grow: 1;
  .return{
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px;
    .iconfont{
      font-size: 1.5em;
    }
  }
  .option-bar {
    border-right: 1px solid #e8e8e8;
    width: 40px;
    display: flex;
    flex-direction: column;
    .tool {
      display: flex;
      align-content: center;
      justify-content: center;
      height: 50px;
      .iconfont {
        display: flex;
        align-items: center;
        font-size: 24px;
        cursor: pointer;
      }
    }
  }
  .operate-container {
    overflow: auto;
    flex-grow: 1;
    .file-list {
      .line {
        display: flex;
        .name {
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          flex-basis: 60%;
        }
        .status {
          flex-basis: 30%;
        }
        .delete{
          flex-basis: 10%;
          cursor: pointer;
        }
      }
    }

    .upload {
      padding: 1em 2em;

      .upload-btn {
        margin-top: 1em;
        font-size: 12px;
        float: right;
        cursor: pointer;
        padding: .3em .9em;
        border-radius: .5em;
        width: fit-content;
        border: 1px solid #d3d3d3;
        transition: .2s linear;

        &:hover {
          background: #f8f8f8;
        }
      }
    }
  }
}
</style>
